<template>
  <div class="myopinion">
    <div
      class="sigle-opinion bdb-borderBase flex js-sp align-center"
      v-for="item in state.list"
      :key="item.id"
    >
      <div class="sigle-left">
        <div class="downt1 mb-6 text-14 text-bold text-left">
          {{ item.feedback_title }}
        </div>
        <div class="downt1 flex js-st">
          <span class="downt3 date">{{ item.create_time }}</span>
          <div class="opin-label text-10">{{ item.platform_name }}</div>
        </div>
      </div>
      <div
        class="check-detail borderBase-bg text-12 personlink radius point"
        @click="checkDetail(item.id)"
      >
        {{ $t("feedback.checkdetail") }}
      </div>
    </div>
  </div>
</template>

<script>
import { userFeedback } from "@/api/article";
import { onMounted, reactive } from "vue";
import { LoginInterception } from "@/utils/common";
export default {
  emits: ["success", "changetab"],
  setup(props, { emit }) {
    const state = reactive({
      listParam: {
        page: 0,
        limit: 10,
      },
      list: [],
    });
    /**
     * methods
     */
    const getList = () => {
      LoginInterception("/opinion")
        .then(() => {
          userFeedback(state.listParam).then((res) => {
            state.list = res.data.items;
          });
        })
        .catch(() => {
          emit("changetab", 1);
        });
    };
    const checkDetail = (id) => {
      emit("success", { active: 1, id: id });
    };
    onMounted(() => {
      getList();
    });
    return {
      state,
      getList,
      checkDetail,
    };
  },
};
</script>

<style lang="less" scoped>
.myopinion {
  width: 100%;
  padding: 0 16px 0 30px;
  box-sizing: border-box;
}
.sigle-opinion {
  height: 74px;
  width: 100%;
  padding: 16px 0;
  box-sizing: border-box;
}
.mb-6 {
  margin-bottom: 6px;
}
.sigle-left {
  width: 400px;
}
.opin-label {
  border-radius: 18px;
  padding: 0 13px;
  box-sizing: border-box;
  background: rgba(255, 206, 0, 0.1);
  color: #ffce00;
}
.date {
  margin-inline-end: 10px;
}
.check-detail {
  min-width: 84px;
  height: 30px;
  padding: 0 10px;
  line-height: 30px;
}
</style>
